<template>
  <nav-bar class="detail-nav">
      <div slot="left" class="back" @click="backClick">
          <img src="~assets/img/common/back.png" alt="">
      </div>
      <div slot="center" class="title">
          <div v-for="(item,index) in titles" :key="item.id" class="title-item"
          :class="{active: currentIndex === index}"
          @click="itemClick(index)">
            <span>{{item}}</span>
          </div>
      </div>
</nav-bar>
</template>

<script>
import NavBar from 'components/common/navbar/NavBar.vue';

export default {
    name: 'DetailNavBar',
    components: {
        NavBar,
    },
    data() {
        return {
            titles: ['商品','参数','评论','推荐'],
            currentIndex: 0,
        }
    },
    methods: {
        itemClick(index) {
            this.currentIndex = index
            this.$emit('navClick',this.currentIndex)
        },
        backClick() {
            this.$router.back()
        }
    } 
}
</script>

<style scoped>
    .title {
        display: flex;
    }
    .title-item {
        flex: 1;
    }
    .active {
        background-color: rgb(245, 245, 245);
    }
    .active span{
        color: lightblue;
    }
    .back {
        margin-top: 5px;
    }
    .back img {
        width: 30px;
        height: 30px;
        margin-top: 5px;
    }
</style>